<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>滚动监听 - UIkit 中文文档</title>
        <meta name="description" content="该监听滚动组件监听页面滚动，并触发基于滚动位置的事件。比如当你向下滚动页面时，你可以使首次出现在视窗中的一个元素触发一个平滑淡出的动画。">
        <meta name="author" content="UIkit中文网">
         
<meta name="keywords" content="UIKit监听滚动组件,监听滚动,监听滚动导航,Scrollspy">
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
        <link id="data-uikit-theme" rel="stylesheet" href="css/uikit.docs.min.css">
        <link rel="stylesheet" href="css/docs.css">
        <link rel="stylesheet" href="../vendor/highlight/highlight.css">
        <script src="../vendor/jquery.js"></script>
        <script src="js/uikit.min.js"></script>
        <script src="../vendor/highlight/highlight.js"></script>
        <script src="js/docs.js"></script>
    </head>

    <body class="tm-background">

        <nav class="tm-navbar uk-navbar uk-navbar-attached">
            <div class="uk-container uk-container-center">

                <a class="uk-navbar-brand uk-hidden-small" href="../index.html"><img class="uk-margin uk-margin-remove" src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>

                <ul class="uk-navbar-nav uk-hidden-small">
                    <li><a href="documentation_get-started.html">开始使用</a></li>
                    <li class="uk-active"><a href="core.html">核心组件</a></li>
                    <li><a href="components.html">附加组件</a></li>
                    <li><a href="customizer.html">定制工具</a></li>
                    <li><a href="../showcase/index.html">案例展示</a></li>
                    <li><a href="tutorials.html">视频教程</a></li>
                </ul>

                <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></div>

            </div>
        </nav>

        <div class="tm-middle">
            <div class="uk-container uk-container-center">

                <div class="uk-grid" data-uk-grid-margin>
                    <div class="tm-sidebar uk-width-medium-1-4 uk-hidden-small">

                        <ul class="tm-nav uk-nav" data-uk-nav>

                            <li class="uk-nav-header">默认</li>
                            <li><a href="base.html">基础</a></li>
                            <li><a href="print.html">打印</a></li>

                            <li class="uk-nav-header">布局类组件</li>
                            <li><a href="grid.html">网格</a></li>
                            <li><a href="panel.html">面板</a></li>
                            <li><a href="block.html">块</a></li>
                            <li><a href="article.html">文章</a></li>
                            <li><a href="comment.html">评论</a></li>
                            <li><a href="utility.html">效果</a></li>
                            <li><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">覆盖</a></li>

                            <li class="uk-nav-header">导航类组件</li>
                            <li><a href="nav.html">导航菜单</a></li>
                            <li><a href="navbar.html">导航栏</a></li>
                            <li><a href="subnav.html">二级导航</a></li>
                            <li><a href="breadcrumb.html">面包屑</a></li>
                            <li><a href="pagination.html">分页</a></li>
                            <li><a href="tab.html">选项卡</a></li>
                            <li><a href="thumbnav.html">缩略图导航</a></li>

                            <li class="uk-nav-header">页面元素</li>
                            <li><a href="list.html">列表</a></li>
                            <li><a href="description-list.html">描述列表</a></li>
                            <li><a href="table.html">表格</a></li>
                            <li><a href="form.html">表单</a></li>

                            <li class="uk-nav-header">常用组件</li>
                            <li><a href="button.html">按钮</a></li>
                            <li><a href="icon.html">图标</a></li>
                            <li><a href="close.html">关闭</a></li>
                            <li><a href="badge.html">徽章</a></li>
                            <li><a href="alert.html">提示框</a></li>
                            <li><a href="thumbnail.html">缩略图</a></li>
                            <li><a href="overlay.html">遮罩</a></li>
                            <li><a href="text.html">文本</a></li>
                            <li><a href="column.html">列</a></li>
                            <li><a href="animation.html">动画</a></li>
                            <li><a href="contrast.html">对比度</a></li>

                            <li class="uk-nav-header">JavaScript组件</li>
                            <li><a href="dropdown.html">下拉菜单</a></li>
                            <li><a href="modal.html">模态对话框</a></li>
                            <li><a href="offcanvas.html">抽屉</a></li>
                            <li><a href="switcher.html">切换器</a></li>
                            <li><a href="toggle.html">拨动器</a></li>
                            <li class="uk-active"><a href="scrollspy.html">滚动监听</a></li>
                            <li><a href="smooth-scroll.html">平滑滚动</a></li>

                        </ul>

                    </div>
                    <div class="tm-main uk-width-medium-3-4">

                        <article class="uk-article">

                            <h1 id="bottom" class="uk-article-title">滚动监听/Scrollspy</h1>

                            <p class="uk-article-lead">在滚动页面时，触发一些事件及动画。</p>

                            <h2 id="usage"><a href="#usage" class="uk-link-reset">用法</a></h2>

                            <p>滚动监听组件监听页面滚动，并触发基于滚动位置的事件。例如，当你向下滚动页面时，你可以使首次出现在视窗中的一个元素触发一个平滑淡入的动画。只需添加带有以下选项的 <code>data-uk-scrollspy</code> 属性。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>Data 属性</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>cls:'MY-CLASS'</code></td>
                                            <td>只有元素首次出现在视窗时才应用这个属性中的class。</td>
                                        </tr>
                                        <tr>
                                            <td><code>repeat: true</code></td>
                                            <td>元素每次出现在视窗中时，都应用这个类。</td>
                                        </tr>
                                        <tr>
                                            <td><code>delay:600</code></td>
                                            <td>添加以毫秒为单位的动画延迟。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <p>通常，<a href="animation.html">动画组件</a>中的类与滚动监视一起搭配使用。</p>

                            <h3 class="tm-article-subtitle">示例 </h3>

                            <p>下面的例字使用了<code>repeat: true</code> 选项。向上或向下滚动可以看到被触发的动画效果。</p>

                            <div class="uk-grid">
                                <div class="uk-width-medium-1-4">
                                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}">
                                        <h3>Fade</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="uk-grid">
                                <div class="uk-width-medium-1-4 uk-push-1-4">
                                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-scale-up', repeat: true}">
                                        <h3>Scale up</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="uk-grid">
                                <div class="uk-width-medium-1-4 uk-push-2-4">
                                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-scale-down', repeat: true}">
                                        <h3>Scale down</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="uk-grid">
                                <div class="uk-width-medium-1-4 uk-push-3-4">
                                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-top', repeat: true}">
                                        <h3>Slide top</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="uk-grid">
                                <div class="uk-width-medium-1-4 uk-push-2-4">
                                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', repeat: true}">
                                        <h3>Slide bottom</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="uk-grid">
                                <div class="uk-width-medium-1-4 uk-push-1-4">
                                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-right', repeat: true}">
                                        <h3>Slide right</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="uk-grid">
                                <div class="uk-width-medium-1-4">
                                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-left', repeat: true}">
                                        <h3>Slide left</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div data-uk-scrollspy="{cls:'uk-animation-fade'}"&gt;...&lt;/div&gt;

&lt;div data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}"&gt;...&lt;/div&gt;

&lt;div data-uk-scrollspy="{cls:'uk-animation-fade', delay:900}"&gt;...&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="groups"><a href="#groups" class="uk-link-reset">组</a></h2>

                            <p>你还可以将多个需要添加滚动监听效果的元素编成一组，这样就不必分别为每个元素添加 data 属性了。只需要添加 <code>data-uk-scollspy"{target:'MY-CLASS'}"</code> 属性到容器元素，将 target 选项指向容器中你想要添加动画效果的条目。当使用 delay(延时)时，将会为进入视野的一行条目添加逐次显现的效果。这个延时效果会为同一组内的下一行元素滚动进入视野时重置。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-grid" data-uk-grid-margin data-uk-scrollspy="{cls:'uk-animation-fade uk-invisible', target:'> div > .uk-panel', delay:300, repeat: true}">
                                <div class="uk-width-medium-1-4">
                                    <div class="uk-panel uk-panel-box uk-invisible">
                                        <h3 class="uk-panel-title">Item</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-4">
                                    <div class="uk-panel uk-panel-box uk-invisible">
                                        <h3 class="uk-panel-title">Item</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-4">
                                    <div class="uk-panel uk-panel-box uk-invisible">
                                        <h3 class="uk-panel-title">Item</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-4">
                                    <div class="uk-panel uk-panel-box uk-invisible">
                                        <h3 class="uk-panel-title">Item</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-4">
                                    <div class="uk-panel uk-panel-box uk-invisible">
                                        <h3 class="uk-panel-title">Item</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-4">
                                    <div class="uk-panel uk-panel-box uk-invisible">
                                        <h3 class="uk-panel-title">Item</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-4">
                                    <div class="uk-panel uk-panel-box uk-invisible">
                                        <h3 class="uk-panel-title">Item</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-4">
                                    <div class="uk-panel uk-panel-box uk-invisible">
                                        <h3 class="uk-panel-title">Item</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                            </div>

                            <h3 class="tm-article-subtitle">Example</h3>

<pre><code>&lt;div data-uk-scrollspy="{cls:'uk-animation-fade', target:'.my-class', delay:300}"&gt;

    &lt;!-- 无延时 --&gt;
    &lt;div class="my-class"&gt;...&lt;/div&gt;

    &lt;!-- 300ms 延时 --&gt;
    &lt;div class="my-class"&gt;...&lt;/div&gt;

    &lt;!-- 600ms 延时 --&gt;
    &lt;div class="my-class"&gt;...&lt;/div&gt;

&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="javascript-options"><a href="#javascript-options" class="uk-link-reset">JavaScript选项 </a></h2>

                            <p>这是一个如何通过属性设置选项的示例： </p>

                            <pre><code>data-uk-scrollspy=&quot;{cls:'uk-animation-fade'}&quot;</code></pre>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-striped">
                                    <thead>
                                        <tr>
                                            <th>选项 </th>
                                            <th>可用的值</th>
                                            <th>默认值</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>cls</code></td>
                                            <td>string</td>
                                            <td>'uk-scrollspy-inview'</td>
                                            <td>当元素出现在视口内时添加的类。 </td>
                                        </tr>
                                        <tr>
                                            <td><code>initcls</code></td>
                                            <td>string</td>
                                            <td>'uk-scrollspy-init-inview'</td>
                                            <td>当元素首次出现在视口内时添加的类。 </td>
                                        </tr>
                                        <tr>
                                            <td><code>topoffset</code></td>
                                            <td>integer</td>
                                            <td>0</td>
                                            <td>在视口中触发事件前的顶部偏移量。</td>
                                        </tr>
                                        <tr>
                                            <td><code>leftoffset</code></td>
                                            <td>integer</td>
                                            <td>0</td>
                                            <td>在视口中触发事件前的左部偏移量。</td>
                                        </tr>
                                        <tr>
                                            <td><code>repeat</code></td>
                                            <td>boolean</td>
                                            <td>false</td>
                                            <td>元素是否每次出现在视口中都应用 <code>cls</code> 中提到的类。</td>
                                        </tr>
                                        <tr>
                                            <td><code>delay</code></td>
                                            <td>integer</td>
                                            <td>0</td>
                                            <td>以毫秒为单位的延时。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>


                            <h3>事件</h3>

                            <p>你可以为以下事件绑定回调函数，以实现自定义功能：</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-striped">
                                    <thead>
                                        <tr>
                                            <th>名称</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>uk.scrollspy.init</code></td>
                                            <td>当元素开始进入视口时触发。</td>
                                        </tr>
                                        <tr>
                                            <td><code>uk.scrollspy.inview</code></td>
                                            <td>当元素在视口中时触发。</td>
                                        </tr>
                                        <tr>
                                            <td><code>uk.scrollspy.outview</code></td>
                                            <td>当元素离开视口时触发。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h3 class="tm-article-subtitle">示例</h3>

<pre><code>$('[data-uk-scrollspy]').on('uk.scrollspy.inview', function(){
    // custom code...
});
</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="scrollspy-nav"><a href="#scrollspy-nav" class="uk-link-reset">滚动监听导航/Scrollspy Nav</a></h2>

                            <p>根据你网站滚动条的位置来自动更新所对应的导航状态，只需添加Data属性 <code>data-uk-scrollspy-nav</code> 到任意导航栏中。每个菜单项必须链接至网站中网站中对应的具有相同ID的部分。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table">
                                    <thead>
                                        <tr>
                                            <th>Data属性 </th>
                                            <th>描述 </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>data-uk-scrollspy-nav</code></td>
                                            <td>触发滚动监听导航的功能必须的JavaScript。</td>
                                        </tr>
                                        <tr>
                                            <td><code>data-uk-scrollspy-nav="{closest:'MY-SELECTOR'}"</code></td>
                                            <td>通过遍历查找此DOM树中最接近的节点元素进行匹配。</td>
                                        </tr>
                                        <tr>
                                            <td><code>data-uk-scrollspy-nav="{smoothscroll:true}"</code></td>
                                            <td>在网页的不同部分之间跳转时，应用<a href="smooth-scroll.html">平滑滚动组件</a>。</td>
                                        </tr>
                                        <tr>
                                            <td><code>data-uk-scrollspy-nav="{cls:'MY-CLASS'}"</code></td>
                                            <td>默认地，滚动监听导航会拨动 <code>uk-active</code> 类。使用 <code>cls</code> 选项使用你自己的类名。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <p>对于滚动监听的例子，可以查看<a href="../tests/core/scrollspy.html">滚动监听测试页面</a>。</p>

                            <h3 class="tm-article-subtitle">Code</h3>

<pre><code>&lt;ul class="uk-nav uk-nav-side" data-uk-scrollspy-nav="{closest:'li', smoothscroll:true}"&gt;
    &lt;li&gt;&lt;a href="#MY-ID"&gt;...&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#MY-ID2"&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div id="MY-ID"&gt;...&lt;/div&gt;
&lt;div id="MY-ID2"&gt;...&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3 id="javascript-scrollspy-nav-options"><a href="#javascript-scrollspy-nav-options" class="uk-link-reset">JavaScript选项 </a></h3>

                            <p>这是一个如何通过属性设置选项的示例： </p>

                            <pre><code>data-uk-scrollspy-nav=&quot;{smoothscroll:true}&quot;</code></pre>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-striped">
                                    <thead>
                                        <tr>
                                            <th>选项</th>
                                            <th>可用的值</th>
                                            <th>默认值</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>cls</code></td>
                                            <td>string</td>
                                            <td>'uk-active'</td>
                                            <td>添加其中的class以激活元素。</td>
                                        </tr>
                                        <tr>
                                            <td><code>closest</code></td>
                                            <td>CSS 选择器</td>
                                            <td>false</td>
                                            <td>将上面所述的类，应用到本选择器对应的元素中。</td>
                                        </tr>
                                        <tr>
                                            <td><code>topoffset</code></td>
                                            <td>integer</td>
                                            <td>0</td>
                                            <td>滚动的顶部偏移量。</td>
                                        </tr>
                                        <tr>
                                            <td><code>leftoffset</code></td>
                                            <td>integer</td>
                                            <td>0</td>
                                            <td>滚动的左部偏移量。</td>
                                        </tr>
                                        <tr>
                                            <td><code>smoothscroll</code></td>
                                            <td>boolean</td>
                                            <td>false</td>
                                            <td>是否显示平滑的滚动动画效果。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>


                            <h3>事件</h3>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-striped uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>名称</th>
                                            <th>参数</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>init.uk.scrollspy</code></td>
                                            <td>event</td>
                                            <td>滚动监听第一次初始化时触发</td>
                                        </tr>
                                        <tr>
                                            <td><code>inview.uk.scrollspy</code></td>
                                            <td>event</td>
                                            <td>元素进入视口后触发</td>
                                        </tr>
                                        <tr>
                                            <td><code>outview.uk.scrollspy</code></td>
                                            <td>event</td>
                                            <td>元素离开视口后触发</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>


                        </article>

                    </div>
                </div>

            </div>
        </div>

        <div class="tm-footer">
            <div class="uk-container uk-container-center uk-text-center">

                <ul class="uk-subnav uk-subnav-line uk-flex-center">
                    <li><a href="http://github.com/uikit/uikit">GitHub</a></li>
                    <li><a href="http://github.com/uikit/uikit/issues">Issues</a></li>
                    <li><a href="http://github.com/uikit/uikit/blob/master/CHANGELOG.md">Changelog</a></li>
                    <li><a href="https://twitter.com/getuikit">Twitter</a></li>
                </ul>

                <div class="uk-panel">
                    <p>Made by <a href="http://www.yootheme.com">YOOtheme</a> with love and caffeine.<br>Licensed under <a href="http://opensource.org/licenses/MIT">MIT license</a>.</p>
                    <a href="../index.html"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
                </div>

            </div>
        </div>

        <div id="tm-offcanvas" class="uk-offcanvas">

            <div class="uk-offcanvas-bar">

                <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav="{multiple:true}">
                    <li class="uk-parent"><a href="#">UIkit 中文文档</a>
                        <ul class="uk-nav-sub">
                            <li><a href="documentation_get-started.html">开始使用</a></li>
                            <li><a href="documentation_how-to-customize.html">如何定制</a></li>
                            <li><a href="documentation_layouts.html">布局示例</a></li>
                            <li><a href="core.html">核心组件</a></li>
                            <li><a href="components.html">附加组件</a></li>
                            <li><a href="documentation_project-structure.html">项目结构</a></li>
                            <li><a href="documentation_less-sass.html">Less &amp; Sass 文件</a></li>
                            <li><a href="documentation_create-a-theme.html">创建主题</a></li>
                            <li><a href="documentation_create-a-style.html">创建样式</a></li>
                            <li><a href="documentation_customizer-json.html">Customizer.json</a></li>
                            <li><a href="documentation_javascript.html">JavaScript</a></li>
                            <li><a href="documentation_custom-prefix.html">自定义前缀</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">Core</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-wrench"></i> 默认</a>
                        <ul class="uk-nav-sub">
                            <li><a href="base.html">基础</a></li>
                            <li><a href="print.html">打印</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> 布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid.html">网格</a></li>
                            <li><a href="panel.html">面板</a></li>
                            <li><a href="block.html">块</a></li>
                            <li><a href="article.html">文章</a></li>
                            <li><a href="comment.html">评论</a></li>
                            <li><a href="utility.html">效果</a></li>
                            <li><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">覆盖</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> 导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="nav.html">导航菜单</a></li>
                            <li><a href="navbar.html">导航栏</a></li>
                            <li><a href="subnav.html">二级导航</a></li>
                            <li><a href="breadcrumb.html">面包屑</a></li>
                            <li><a href="pagination.html">分页</a></li>
                            <li><a href="tab.html">选项卡</a></li>
                            <li><a href="thumbnav.html">缩略图导航</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-check"></i> 页面元素</a>
                        <ul class="uk-nav-sub">
                            <li><a href="list.html">列表</a></li>
                            <li><a href="description-list.html">描述列表</a></li>
                            <li><a href="table.html">表格</a></li>
                            <li><a href="form.html">表单</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="button.html">按钮</a></li>
                            <li><a href="icon.html">图标</a></li>
                            <li><a href="close.html">关闭</a></li>
                            <li><a href="badge.html">徽章</a></li>
                            <li><a href="alert.html">提示框</a></li>
                            <li><a href="thumbnail.html">缩略图</a></li>
                            <li><a href="overlay.html">遮罩</a></li>
                            <li><a href="text.html">文本</a></li>
                            <li><a href="column.html">列</a></li>
                            <li><a href="animation.html">动画</a></li>
                            <li><a href="contrast.html">对比度</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dropdown.html">下拉菜单</a></li>
                            <li><a href="modal.html">模态对话框</a></li>
                            <li><a href="offcanvas.html">抽屉</a></li>
                            <li><a href="switcher.html">切换器</a></li>
                            <li><a href="toggle.html">拨动</a></li>
                            <li><a href="scrollspy.html">滚动监听</a></li>
                            <li><a href="smooth-scroll.html">平滑滚动</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">附加组件</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> 布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid-js.html">动态网格</a></li>
                            <li><a href="grid-parallax.html">视差网格</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> 导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dotnav.html">圆点导航</a></li>
                            <li><a href="slidenav.html">滑动导航</a></li>
                            <li><a href="pagination-js.html">动态分页</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="form-advanced.html">高级表单</a></li>
                            <li><a href="form-file.html">文件表单</a></li>
                            <li><a href="form-password.html">密码表单</a></li>
                            <li><a href="form-select.html">选择表单</a></li>
                            <li><a href="placeholder.html">占位符</a></li>
                            <li><a href="progress.html">进度条</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="lightbox.html">灯箱</a></li>
                            <li><a href="autocomplete.html">自动完成</a></li>
                            <li><a href="datepicker.html">日期选择器</a></li>
                            <li><a href="htmleditor.html">HTML 编辑器</a></li>
                            <li><a href="slider.html">滚动条</a></li>
                            <li><a href="slideset.html">滑块集</a></li>
                            <li><a href="slideshow.html">幻灯片</a></li>
                            <li><a href="parallax.html">视差</a></li>
                            <li><a href="accordion.html">手风琴</a></li>
                            <li><a href="notify.html">通知</a></li>
                            <li><a href="search.html">搜索</a></li>
                            <li><a href="nestable.html">可嵌套</a></li>
                            <li><a href="sortable.html">可排序</a></li>
                            <li><a href="sticky.html">附着</a></li>
                            <li><a href="timepicker.html">时间选择器</a></li>
                            <li><a href="tooltip.html">工具提示</a></li>
                            <li><a href="upload.html">上传</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="../showcase/index.html">案例展示</a></li>
                    <li><a href="tutorials.html">视频教程</a></li>
                </ul>

            </div>

        </div>

    </body>
</html>
